
//* todo 1 验证是否登陆
var loginName=sessionStorage.getItem('loginName');
//异步加载页头、页脚
$('#top').load('data/top.php',function(){
	if(loginName){
		$('#login').parent().html('您好，欢迎来到'+loginName);
	}

});
$('#bottom').load('data/bottom.php');


/*****请登录 弹出模态框*****/

$("#login").click(function(){
	//TODO 显示用户登录框
	$(".modal").css('display','block');
	console.log('点击登陆啦');
	//TODO 阻止<a>标签的默认行为
	return false;
});


/*商品详情*/
$("#product_detail>.main_tabs").on("click",function(e){
	var target=e.target;
	if (target!=this)
	{
		if (target.nodeName=="A")
		{
			target=target.parentNode;
		}
		$(".current").className="";
		$('.current').attr('class','').siblings().removeClass('current');
		target.className="current";
		var divs=$("#product_detail>[id^='product_']");
		//遍历divs的每个元素 设置其隐藏 如果target的i属性不是-1 找到divs下标为i的div 设置其显性
		for (var i=0;i<divs.length;i++)
		{
			divs[i].style.display=
			i!=target.dataset.i?"none":"block";
		}
	}
});


/*放大镜*/
var zoom={
	LIWIDTH:0,//保存每个li的宽度
	COUNT:0,//总li个数
	moved:0,//左移的个数
	OFFSET:0,//ul的起始left的值
	MSIZE:0,//保存mask的大小
	MAXTOP:0,//保存mask最大可用top
	MAXLEFT:0,//保存mask最大可用left
	init:function(){
		//找到id为icon_list下的第一个直接子元素li 获取其计算后的width转为浮点数保存在LIWIDTH
		this.LIWIDTH=parseFloat($("#icon_list>li:first-child").css("width"));
		//找到id为icon_list下的所欲直接子元素li 获取其个数 保存在COUNT中
		this.COUNT=parseFloat($("#icon_list>li").length);
		//找到id为icon_list的元素计算后的left 转为浮点数保存在OFFSET
		this.OFFSET=parseFloat($("#icon_list").css("left"));
		//debugger;
		//找到class以forward开头的a元素绑定事件为move 提前绑定this为当前对象
		$("a[class^='forward']").bind("click",this.move.bind(this));//??????????
		//找到class以backward开头的a元素绑定事件为move 提前绑定this为当前对象
		$("a[class^='backward']").bind("click",this.move.bind(this));
		//为id为icon_list的元素绑定鼠标进入事件为changeMImg
		$("#icon_list").bind("mouseover",this.changeMImg);
		//为id为superMask的元素绑定鼠标进入事件为maskToggle
		$("#superMask").bind("mouseover",this.maskToggle);
		//为id为superMask的元素绑定鼠标移除事件为maskToggle
		$("#superMask").bind("mouseout",this.maskToggle);
		//获得id为mask的元素计算后的宽保存在MSIZE中
		this.MSIZE=parseFloat($("#mask").css("width"));
		//计算MAXTOP：id为superMask的元素的高-mask的高 取浮点数
		this.MAXTOP=parseFloat($("#superMask").css("height"))-this.MSIZE;
		//计算MAXLEFT：id为superMask的元素的宽-mask的宽 取浮点数
		this.MAXLEFT=parseFloat($("#superMask").css("width"))-this.MSIZE;
		//debugger;
		//为id为superNask的元素绑定鼠标移动事件为maskMove
		$("#superMask").bind("mousemove",this.maskMove.bind(this));
	},
	maskToggle:function(){//切换mask的显示
		$("#mask").css("display",
			$("#mask").css("display")=="block"?
			"none":"block"
		);
		//设置id为LargeDiv的display为mask的display
		$("#largeDiv").css("display",
			$("#mask").css("display")
		);
		//获取mImg的src 查找最后一个m的位置i
		var i=$("#mImg")[0].src.lastIndexOf("m");
		//拼接大图片路径，保存在src中
		var src=$("#mImg")[0].src.slice(0,i)+
				"l"+
				$("#mImg")[0].src.slice(i+1);
		//debugger;
		//设置largeDiv的背景图片为src
		$("#largeDiv").css("backgroundImage","url("+src+")");
	},
	maskMove:function(e){
		var x=e.offsetX;
		var y=e.offsetY;
		var top=y-this.MSIZE/2;
		var left=x-this.MSIZE/2;
		top=top<0?0:
			top>this.MAXTOP?this.MAXTOP:top;
		left=left<0?0:
			left>this.MAXLEFT?this.MAXLEFT:left;
		//debugger;
		$("#mask").css("top",top+"px");
		$("#mask").css("left",left+"px");
		//设置；largeDiv的backgroundPosition为
			//-1*leftpx  -2*toppx
		$("#largeDiv").css("backgroundPosition",-16/7*left+"px "+(-16/7*top)+"px");
	},
	move:function(e){
		//获得目标元素
		var target=e.target;
		if(target.className.indexOf("disabled")==-1)
		{
			//moved+？如果target的class以forward开头 则+1 否则-1
			this.moved+=/^forward/.test(target.className)?1:-1;
			//设置id为icon_list的元素的left为-moved*LIWIDTH+20
			$("#icon_list").css("left",-this.moved*this.LIWIDTH+this.OFFSET+"px");
			this.checkA();
		}
	},
	checkA:function(){
		if(this.moved==0)
		{	
			$("a[class^='backward']")[0].className="backward_disabled";
		}else if(this.COUNT-this.moved==5)
		{	
			$("a[class^='forward']")[0].className="forward_disabled";
		}else{
			$("a[class^='backward']")[0].className="backward";
			$("a[class^='forward']")[0].className="forward";
		}
	},
	changeMImg:function(e){//更换中图片
		var target=e.target;
		if (target.nodeName=="IMG")
		{
			var i=target.src.lastIndexOf(".");
			$("#mImg")[0].src=target.src.slice(0,i)+"-m"+target.src.slice(i);
		}
	}
}
zoom.init();